<script setup>
import { onMounted, watch, nextTick ,defineProps, handleError} from "vue";
import Player from "xgplayer";
import { Events } from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import HlsJsPlayer from 'xgplayer-hls.js';
import { Message } from "@arco-design/web-vue";

const props = defineProps({
    url:{
        type:String,
        default:'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8'
    },
    poster:{
        type:String,
        default:'https://www.uipuzi.com/wp-content/uploads/thumb/2023/08/fill_w626_h470_g0_mark_30-3D-Icons-Illustration-NFT-Technology-%E2%80%94-3D-Assets-1.webp'
    }
})

watch(props.url,(newA,Old)=>{
    console.log('new',newA,'Olf',Old);    
})

// 当前页面的播放地址
let player  = null

console.log('props',props);

console.log('第一秒钟接收到的播放地址',props.url);


setTimeout(() => {
    console.log('10秒钟之后接收到的播放地址',props.url);
},10000)

// 下一集视频空间开启
// playNext: {
//         urlList: [
//           'url1',
//           'url2',
//           'url3'
//         ],
//     }

// 'https://baidu.sd-play.com/20230321/l7beHLWH/index.m3u8'
// https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8
const init = () => {
    nextTick(() => {
        player = new Player({
            id: 'mse',
            url: props.url,
            fluid:true,
            fitVideoSize:'auto',
            videoFillMode:'contain',
            autoplayMuted:true,
            poster:props.poster,
            isLive: false, //直播场景设置为true
            autoplay:true,
            playsinline: false,
            mini:true,
            download:false,
            plugins:[HlsJsPlayer]
        })
        // 正在加载视频播放数据
        player.on(Events.LOAD_START,()=>{
            Message.clear()
            Message.loading({
                content:'视频文件正在加载中'
            })  
        })
        // // 自动播放失败
        // player.on(Events.AUTOPLAY_PREVENTED,()=>{
        //     Message.clear()
        //     Message.error('自动播放失败请手动播放')
        // })
        // // 自动播放成功
        // player.on(Events.AUTOPLAY_STARTED,()=>{
        //     Message.clear()
        //     Message.success('已经为您开启自动播放')
        // })
        // 绑定加载成功事件
        player.on(Events.LOADED_DATA,()=>{
            Message.clear()
            Message.success('加载视频成功')
            setTimeout(()=>{
                Message.clear()
            },2000)
        })
        // 绑定加载失败事件
        player.on(Events.ERROR,() => {
            Message.error('加载视频失败')
            setTimeout(()=>{
                Message.clear()
            },2000)
        })
        // 发生变化
        player.on(Events.URL_CHANGE,()=>{
            Message.success('正在为您切换下一集')
        })
    })
}

// 检测到当前播放资源发生变化时候触发事件
watch(()=>props.url,(newpath,oldpath)=>{
    if (!player) {
        init()
        return
    }
    console.log('player',player);
    // 如果当前有player实例 -- 直接进行更改当前player的url和poster
    player.src = props.url
    player.poster = props.poster
})


onMounted(() => {
    init()
})

</script>
<template>
    <div style="width: 100%; height: 100%" id="mse"></div>
</template>

<style lang="less" scoped>
#mse {
    border-radius: 4px;
    background: none;
    box-shadow: 0px 0px 40px #ccc;
}
</style>
